<template>
  <div>
    <!-- 头部 -->
    <el-card class="head-content">
      <span class="head-content-txt">文章管理</span>
      <i class="el-icon-arrow-right head-content-txt" />
      <span class="head-content-txt">查看</span>
    </el-card>
    <!-- 主体 -->
    <el-card class="form-content">
      <el-form ref="form" :model="form" size="small">
        <el-form-item label="类型选择">
          <el-radio-group v-model="form.resource">
            <el-radio label="图文" />
            <el-radio label="图片" />
            <el-radio label="视频" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="form.title" style="width: auto;" maxlength="30" show-word-limit type="text" />
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="form.classification" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="作者">
          <el-select v-model="form.author" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="标签:最多可选择五个">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="美食/餐厅线上活动" name="type" />
            <el-checkbox label="地推活动" name="type" />
            <el-checkbox label="线下主题活动" name="type" />
            <el-checkbox label="单纯品牌曝光" name="type" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item v-show="form.resource === '图文'" label="文章详情">
          <TiEditor v-show="form.resource === '图文'" ref="Ti" width="700" />
        </el-form-item>
        <el-form-item v-show="form.resource === '图片'" label="文章详情:图片要求:宽度1620px,大小1M内.已上传0/10张.">
          <el-upload
            class="upload-demo"
            style="width:300px;"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture"
            limit="10"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item v-show="form.resource === '视频'" label="文章详情:视频要求:大小1M内。" />
        <el-upload
          v-show="form.resource === '视频'"
          class="upload-demo"
          drag
          :on-success="uploadSuccess"
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
          :before-upload="beforeAvatarUpload"
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

        </el-upload>
        <!-- 上传图片 -->
        <el-form-item label="封面: 图片要求：宽度xxpx,大小1M内。" />
        <el-upload
          class="upload-demo"
          drag
          :on-success="uploadSuccess"
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
          :before-upload="beforeAvatarUpload"
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

        </el-upload>
        <img v-if="form.coverImg" style="width: 200px; height: 200px;" :src="form.coverImg" alt="">
        <el-form-item label="分享副标题:">
          <el-input
            v-model="form.Subtitle"
            style="width:260px;"
            type="textarea"
            show-word-limit
            :rows="2"
            maxlength="30"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="可看用户:">
          <el-radio-group v-model="form.VisibleUser">
            <el-radio label="全部用户" />
            <el-radio label="部分机构" />
          </el-radio-group>
        </el-form-item>
        <div v-show="form.VisibleUser === '部分机构'" class="part">
          <div>上海</div>
          <div>北京</div>
          <div>日本</div>
          <div>迪士尼</div>
          <div>迪士尼</div>
          <div>迪士尼</div>
          <div>迪士尼</div>
        </div>
        <el-form-item style="margin-top: 20px;">

          <el-button type="primary" @click="back">返回</el-button>
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</template>

<script>
// 引入富文本组件
import TiEditor from '@/components/Tinymce'
export default {
  components: {
    TiEditor
  },
  data() {
    return {
      wpList: [{ name: 'pc' }, { name: 'app' }],
      active: 'pc',
      dialogFormVisible: false, // 预览模态框
      TiEditorShow: true, // 富文本的显示或隐藏
      fileList: [{
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }, {
        name: 'food2.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }],
      form: {
        title: '', // 标题
        classification: '', // 分类
        author: '', // 作者
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '图文', // 类型选择
        desc: '',
        coverImg: '', // 上传的照片
        Subtitle: '', // 副标题
        VisibleUser: '全部用户' // 可看用户
      }
    }
  },
  methods: {
    // 返回上一页
    back() {
      window.history.back(-1)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      const isLt1M = file.size / 1024 / 1024 < 1

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt1M) {
        this.$message.error('上传头像图片大小不能超过 1MB!')
      }
      // return isJPG && isLt2M;
      return isLt1M
    },
    // 图片上传成功
    uploadSuccess(res) {
      console.log(res)
      // if (res.success) {
      // 	this.form.coverImg = res.data.fileUrl
      // } else {
      // 	this.$message.error('图片上传失败')
      // }
      // this.$refs.upload.clearFiles()
    },
    getTin() {
      var rs = this.$refs.Ti.getContent()
      return rs
    },
    // 设置富文本框内容
    setTin(v) {
      this.$refs.Ti.setContent(v)
    }
  }
}
</script>

<style lang="scss" scoped>
  .head-content {
    width: 100%;

    .head-content-txt {
      font-size: 24px;
      font-weight: 550;
    }
  }

  .form-content {
    margin-top: 10px;

    .maskHead {
      width: 100%;
      background-color: #F2F2F2;
      height: 50px;
      justify-content: center;
      display: flex;

      .maskHeadAppPc {
        display: flex;
        align-items: center;
        .maskHeadAppPcTXT{
          width: 150px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #000000;
          background-color: #FFFFFF;
          border-radius: 5px;
        }

      }
    }
    .maskContent{
      .maskContent-title{
        font-size: 20px;
        font-weight: 550;
      }
      .AuthorColumn{
        display: flex;
        justify-content: space-between;
        .AuthorColumn-leftBox{
          display: flex;
          align-items: center;
          margin-top: 20px;
          .AuthorColumn-leftBox-img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
          .AuthorColumn-leftBox-AuthorBox{
            display: flex;
            flex-direction: column;
            margin-left: 20px;
            .AuthorColumn-leftBox-timeDate{
              margin-top: 10px;
            }
          }
        }
        .AuthorColumn-rightBox{
        margin-top: 20px;
        .browse{
          margin-right: 20px;
        }
        }
      }
    }
    .maskImageText{

       .maskImageText-img{
         width: 500px;
         height: 200px;
         margin: 0 auto;
       }
       .maskImageText-txt{
         font-size: 16px;
       }
    }
   .appBox{
     width: 25%;
     border: 1px solid #000000;
     margin: 20px auto auto auto;
     padding: 10px 20px;
     border-radius: 15px;
     .appTitle{
       font-size: 18px;
       font-weight: 550;
     }
     .AuthorColumn{
       display: flex;
       justify-content: space-between;
       .AuthorColumn-leftBox{
         display: flex;
         align-items: center;
         margin-top: 20px;
         .AuthorColumn-leftBox-img{
           width: 35px;
           height: 35px;
           border-radius: 50%;
         }
         .AuthorColumn-leftBox-AuthorBox{
           display: flex;
           flex-direction: column;
           margin-left: 10px;
           .AuthorColumn-leftBox-timeDate{
             margin-top: 5px;
           }
         }
       }
       .AuthorColumn-rightBox{
       margin-top: 20px;
       .browse{
         margin-right: 20px;
       }
       }
     }
     .labelBox{
       margin-top: 10px;
     }
     .ImgTxtBox{
      margin-top: 20px;
       .ImgTxtBox-img{
         width: 100%;
         height: 200px;
       }
       .ImgTxtBox-txt{
         margin-top: 20px;
       }
     }
   }
}
.part{
  width: 30%;
  //min-height: 200px;
  border: 1px solid #000000;
  display: flex;
  flex-wrap: wrap;
  div{
    width: 30%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
